<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementUI</title>

    <link rel="stylesheet" href="../lib/element-plus/index.css">
    <style>


    </style>
</head>
<body>

<div id="app">

<!--
   栅格系统
     把一行划分成若干分数
     elementplis中 分为24 栏
-->

    <el-row :gutter="30">
        <el-col :span="12">span-12</el-col>
        <el-col :span="12">span-12</el-col>

    </el-row>
    <el-row>
        <el-col :offset="8"  :span="8">offset-8 span-8</el-col>
        <el-col :offset="2" :span="6">offset-2 span-8</el-col>
    </el-row>


     <el-row>
         <el-col :span="12">
             <el-row>
                 <el-col :span="8">span-12 span-8</el-col>
                 <el-col :span="8">span-12 span-8</el-col>
                 <el-col :span="8">span-12 span-8</el-col>
             </el-row>


             <el-row>
                  <el-col :span="12">span-12 span-12</el-col>
                 <el-col :span="12">span-12 span-12</el-col>
             </el-row>
         </el-col>
         <el-col :span="12">span-12</el-col>
     </el-row>

</div>
</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/element-plus/index.full.js"></script>
<script>

    var app = Vue.createApp({});

    app.use(ElementPlus).mount('#app')

</script>
</html>